{% load i18n %}{% extends "page.html" %}
{% block page %}tag{% endblock %}
{% block title %}{% trans "Latitude Tags" %}: {{ tag|escape }}{% endblock %}

{% block scripts %}
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="/static/tag.js"></script>
{% endblock %}

{% block content %}
<div id="map"></div>
<div class="hshadow hs1"></div>
<div class="hshadow hs2"></div>
<div class="hshadow hs3"></div>

<div id="tag">
  <h1 class="tag content">#{{ tag|escape }}</h1>
  <select id="member-select" onchange="select(this.value)"></select>
</div>

<div id="controls">
  <div class="content">
    {% if join_time %}
      {% trans "Publishing your location for:" %}
      <select id="duration" onchange="join($('duration').value)">
        <option selected>{{ join_time|escape }}</option>
        <option value=600>10 min</option>
        <option value=3600>1 h</option>
        <option value=10800>3 h</option>
        <option value=43200>12 h</option>
        <option value=86400>24 h</option>
        <option value=0>Stop!</option>
      </select>
    {% else %}
      {% if vars.user %}
        {% trans "Join this tag for:" %}
        &nbsp;<a href="#" onclick="join(600)">10min</a>
        &nbsp;<a href="#" onclick="join(3600)">1h</a>
        &nbsp;<a href="#" onclick="join(10800)">3h</a>
        &nbsp;<a href="#" onclick="join(43200)">12h</a>
        &nbsp;<a href="#" onclick="join(86400)">24h</a>
      {% else %}
        <a href="{{ vars.login_url }}">
          {% trans "Sign in to join this tag" %}
        </a>
      {% endif %}
    {% endif %}
  </div>
</div>

<table id="member-table" width="100%" cellpadding=0 cellspacing=0 border=0>
  <thead>
    <tr>
      <th class="nickname">{% trans "Nickname" %}</th>
      {% if vars.member %}
        <th class="distance">{% trans "Distance" %}</th>
      {% endif %}
    </tr>
  </thead>
  <tbody id="members-tbody">
  </tbody>
</table>

<form method="get" id="join-form" style="display: none">
  <input type=hidden name=join value=1>
  <input type=hidden name=tag value="{{ tag|escape }}">
  <input type=hidden name=duration id="join-duration" value=0>
  <input type=hidden name=signature value="{{ vars.signature|escape }}">
</form>

<script>
  var members = {{ members }};
  var map = initialize_map($('map'));
  markers = create_markers(map, members);
  rows = populate_list($('members-tbody'), members, is_member);
  fit_map_bounds(members);

  function join(duration) {
    $('join-duration').value = duration;
    $('join-form').submit();
  }
</script>
{% endblock %}
